<template>
 <common-card title="今日订单" :value="orderToday | numberFormat">
     <template>
       <div ref="today-orders-chart" style="width: 100%;height: 100%;">图标</div>
     <!-- <v-echarts :options="getOptions ()" autoresize="true" /> -->
     </template>
     <!-- <template v-slot:total> -->
     <template #total>
       <span>昨日订单量</span>
       <span class="emphasis">$ {{orderLastDay | numberFormat}}</span>
     </template>
   </common-card>
</template>

<script>
import {mapState} from "vuex"
import throttle from 'lodash/throttle'
export default {
name:"TodayOrders",
computed:{
    // "orderToday": 2562061,
    // "orderLastDay": 2100000,
    // "orderTrend": [610, 432, 220, 534, 790, 430, 220, 320, 532, 320, 834, 690, 530, 220],
    // "orderTrendAxis": ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00"],
  ...mapState({
    orderToday:state=>state.data.reportData.orderToday,
    orderLastDay:state=>state.data.reportData.orderLastDay,
    orderTrend:state=>state.data.reportData.orderTrend,
    orderTrendAxis:state=>state.data.reportData.orderTrendAxis,
  })
},
watch:{
  orderTrend(){
    this.chart.setOption(this.getOptions ())
  }
},
mounted () {
  this.chart=this.$echarts.init(this.$refs["today-orders-chart"])
  // this.chart.setOption(this.getOptions ())
  // 解决触发太频繁,解决图表自适应,应用到监视属性
  window.addEventListener("resize", throttle(()=>{
    this.chart.resize()
  },500))
},
methods: {
  getOptions () {
    return {
      // X轴
      xAxis:{
        // 时否显示x轴
        show:false,
        // 两侧是否留白
        boundaryGap: false,
        // X轴数据列表
        data:this.orderTrendAxis
      },
      // Y轴
      yAxis: {
        show:false,

      },
      series:[
        {
          name:"实时订单数",
          data:this.orderTrend,
          type:"line",
          areaStyle:{
            color: '#A64CA6'
          },
          lineStyle: {
            opacity: 0
          },
          itemStyle:{
            opacity: 0
          },
          smooth:true,

        }
      ],
      // 网格,图形填充容器
      grid: {
        left: 0,
        right: 0,
        top:0,
        bottom:0,
      },
      tooltip: {
        trigger:"axis"
      }

    }
  }
}
}
</script>

<style>

</style>